<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="5">
        <div class="grid-content bg-purple" style="border: 1px solid #000;height: 100%">
          <div id="box">
            <span>基本信息
            <el-button type="text"
                       icon="el-icon-top-right"
                       @click="handleClick"
                       style="float: right;padding-right: 10px;"
                       :disabled="item.stats === 1"
            >迁出
            </el-button>
              </span>
            <div class="product-content1">
              <image-preview :src="item.picture" alt="Dynamic Image" class="fixed-image-size"/>
              <div class="info align-left" style="border: 1px solid #000; height: 300px; overflow: auto;">
                <h4>姓名：{{ item.name }}</h4>
                <h4>性别：{{ item.gender == '1' ? '男' : '女' }}</h4>
                <h4>民族：{{ item.nation }}</h4>
                <h4>电话：{{ item.iphone }}</h4>
                <h4>小区：{{ item.communityName }}</h4>
                <h4>证件号码：{{ item.idCardNumber }}</h4>
                <h4>户籍地址：{{ item.residenceAddress }}</h4>

                <div v-if="item.labelNames!==null">
                  <hr>
                  <span style="color: #00afff">身份标签</span><br><br>
                  <el-tag type="success">{{ item.labelNames }}</el-tag>
                </div>
                <div id="box">
                  <li v-for="(v, index) in EmigrationLog" :key="index" class="product-item">
                    <div class="info align-left">
                      <hr>
                      <span style="color: #00afff">迁移记录</span><br>
                      <h4>迁出小区：<span v-if="v.communityName">{{ v.communityName }}</span><span v-else>--</span></h4>
                      <h4>迁出时间：<span v-if="v.outtime">{{ v.outtime }}</span><span v-else>--</span></h4>
                      <h4>操作人：<span v-if="v.userName">{{ v.userName }}</span><span v-else>--</span></h4>
                      <h4>描述：<span v-if="v.des">{{ v.des }}</span><span v-else>--</span></h4>
                    </div>
                  </li>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple" style="border: 1px solid #000; height: 760px">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple" style="border: 1px solid #000; height: 300px; position: relative;">
             <span
               style="position: absolute; top: 10px; left: 10px; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); margin: 0;"
             >
              <span style="margin-right: auto;">出行记录</span>
              <el-button type="text" @click="carEstate" style="margin-left: auto;">
                <span style="margin-right: 10px;">更多</span>
              <i class="el-icon-caret-right"/>
              </el-button>
              </span>


                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                  <el-empty description="最近半年无记录" :image-size="100"></el-empty>


                </div>
              </div>
              <br></el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="border: 1px solid #000; height: 300px" @click="redirectToEstatePage">
                <span>住房信息</span>
                <div>
                  <el-row>
                    <el-col :span="6" style="width: 16%;">
                      <div class="custom-circle">
                        <i class="el-icon-s-home custom-icon"></i>
                      </div>
                    </el-col>
                    <el-col :span="20">
                      <div class="grid-content bg-purple-light">
                        <el-table
                          :data="estateLists"
                          empty-text=""
                          style="width: 100%; height: 90px"
                        >
                          <template slot="empty">
                            <div style="text-align: center; color: red; font-weight: bold;">暂无该用户住房信息</div>
                          </template>
                          <!-- 表格列 -->
                          <el-table-column
                            label="楼栋号"
                            width="110"
                          >
                            <template slot-scope="scope">
                              <span>{{ scope.row.ridgepole }}栋</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="单元号"
                            width="110"
                          >
                            <template slot-scope="scope">
                              <span>{{ scope.row.element }}单元</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="房间号"
                            width="80"
                          >
                            <template slot-scope="scope">
                              <span>{{ scope.row.households }}室</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-col>
                  </el-row>
                  <hr>
                  <div id="box">
                    <ul class="population-list">
                      <li v-if="estateLists.length === 0">
                        <div class="info align-left">
                          <h4>房屋类型： --</h4>
                          <h4>所在小区： --</h4>
                          <h4>所属辖区： --</h4>
                          <h4>住房地址： --</h4>
                        </div>
                      </li>
                      <li v-else v-for="(v, index) in estateLists" :key="index" class="product-item">
                        <div class="info align-left">
                          <h4>房屋类型：<span v-if="v.estateType">{{ v.estateType }}</span><span v-else>--</span></h4>
                          <h4>所在小区：<span v-if="v.communityName">{{ v.communityName }}</span><span v-else>--</span>
                          </h4>
                          <h4>所属辖区：<span v-if="v.areaName">{{ v.areaName }}</span><span v-else>--</span></h4>
                          <h4>住房地址：<span v-if="v.communityName">{{ v.communityName }}{{ v.ridgepole }}栋{{
                              v.element
                            }}单元{{ v.households }}室</span><span v-else>--</span></h4>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <br></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple" style="border: 1px solid #000; height: 222px; position: relative;">
                <span
                  style="position: absolute; top: 10px; left: 10px; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); margin: 0;"
                >
              <span style="margin-right: auto;">行车轨迹</span>
              <el-button type="text" @click="addEstate" style="margin-left: auto;">
                <span style="margin-right: 10px;">更多</span>
              <i class="el-icon-caret-right"/>
              </el-button>
              </span>
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                  <el-empty description="最近半年无记录" :image-size="100"></el-empty>


                </div>
              </div>
              <br></el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="border: 1px solid #000; height: 222px; position: relative;">
                <span style="position: absolute; top: 10px; left: 10px; margin: 0;">车辆信息</span>
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                  <el-empty description="最近半年无记录" :image-size="100"></el-empty>


                </div>
              </div>
              <br>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content bg-purple" style="border: 1px solid #000; height: 200px; position: relative;">
                <span style="position: absolute; top: 10px; left: 10px; margin: 0;">关联关系</span>
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                  <el-avatar :src="item.picture" class="avatar" :size="100"></el-avatar>


                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>


    <el-dialog title="人员迁出" :visible.sync="dialogFormVisible" style="width: 50%">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="迁出小区" prop="communityName">
          <el-select v-model="form.communityName" placeholder="请选择" :clearable="true">
            <el-option :label="item.communityName" :value="item.communityName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="迁出时间" prop="outtime">
          <el-date-picker v-model="form.outtime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="操作人" label-width="80px">
          <el-input v-model="form.userName" autocomplete="off" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="80px">
          <el-input
            type="textarea"
            placeholder="请输入长度不超过255个字符"
            :rows="3"
            maxlength="255"
            v-model="form.des"
            :show-word-limit="true"
            style="width: 220px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEmigration">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { estateList } from '@/api/community/estate'
import { handleClick, selectEmigrationLog } from '@/api/community/population'

export default {
  name: 'Document',
  data() {
    return {
      item: '',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      stats: 1,
      EmigrationLog: [],
      currentView: '', // 控制显示哪个盒子
      populationNum: 0,
      buildingCount: 0,
      selectedItems: [],
      dialogVisible: false,
      selectedFile: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实有房屋统计表格数据
      estateLists: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        id: null,
        pageNum: 1,
        pageSize: 10,
        name: null,
        gender: null,
        picture: null,
        age: null,
        idCardNumber: null,
        residenceAddress: null,
        registrationDate: null,
        iphone: null,
        nation: null,
        districtId: null
      },
      // 表单参数
      form: {
        userName: localStorage.getItem('username'),
        outtime: null,
        des: '',
        name: '',
        communityName: '',
        id: null
      },

      queryParam: {},
      // 表单校验
      rules: {
        communityName: [
          { required: true, message: '请选择迁出小区', trigger: 'change' }
        ],
        outtime: [
          { required: true, message: '请选择迁出时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.item = this.$route.params.item
    if (this.item != null && this.item != undefined && this.item !== '') {
      localStorage.setItem('item', JSON.stringify(this.item))
    }
    this.item = JSON.parse(localStorage.getItem('item'))
    console.log(this.item)
    this.estateList()
    this.handleEmigrationLog()
  },
  methods: {
    estateList() {
      let id = this.item.id
      estateList(id).then(response => {
        this.estateLists = response.data
      })
    },
    handleClick() {
      this.dialogFormVisible = true
    },
    handleEmigration() {
      this.form.id = this.item.id
      this.form.name = this.item.name
      handleClick(this.form).then(response => {
        if (200 === response.code) {
          this.$message({
            message: '迁出成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.$router.push({
            path: '/community/population/',
            name: 'Population'
          })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },

    handleEmigrationLog() {
      let id = this.item.id
      selectEmigrationLog(id).then(response => {
        if (200 === response.code) {
          this.EmigrationLog = response.data
        }
      })
    },
    addEstate(){
      this.$message.info("不存在行车轨迹！")
    },
    carEstate(){
      this.$message.info("不存在出行记录！")
    },
    redirectToEstatePage() {
      if (this.estateLists && this.estateLists.length > 0) {
        this.$router.push({
          path: '/estate/document',
          name: 'Dict'
        });
      } else {
        this.$message.info("不存在房屋信息！");
      }
    }


  }
}
</script>

<style scoped>
.product-content1 {
  box-sizing: border-box;
  padding: 5px;
}

.align-left {
  list-style: none;
  text-align: left;
}

.grid-content {
  position: relative;
}

.app-container {
  overflow-y: auto; /* 或者 overflow: auto; */
  max-height: 100%; /* 设置一个最大高度，超出部分会自动出现滚动条 */
}

.custom-circle {
  width: 30px; /* 设置圆形的宽度 */
  height: 30px; /* 设置圆形的高度 */
  border-radius: 50%; /* 让元素呈现圆形 */
  background-color: #e1f3fb; /* 设置背景颜色，可根据需求调整 */
  display: flex;
  margin-left: 20px; /* 左边距 */
  margin-top: 10px; /* 上边距 */
  justify-content: center;
  align-items: center;
}

.custom-icon {
  font-size: 24px; /* 设置图标的大小 */
  color: #00afff; /* 设置图标的颜色 */
}

.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 使用 contain 适应容器 */

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
